{{#if showHeader}}
  <section class="header clearfix">
    <h1>
      {{#if editing}}
        {{t "newCatalog.upgrade"}}
        <span style="font-weight: normal">
          {{catalogApp.displayName}}
        </span>
      {{else if istio}}
        {{#link-to parentRoute (query-params istio=true)}}
          {{t "newCatalog.istio.catalog"}}
          {{templateResource.displayName}}
        {{/link-to}}
      {{else}}
        {{#link-to parentRoute}}
          {{t "newCatalog.catalog"}}
          {{templateResource.displayName}}
        {{/link-to}}
      {{/if}}
      {{#if templateResource.catalogRef.isHelm3}}
        <img class="helm-version-3 vertical-middle" src="{{app.baseAssets}}assets/images/logos/helm-v3.svg" />
      {{/if}}
    </h1>
  </section>
{{/if}}

<section>
  <div class="row">
    <div class="col span-4 text-center">
      {{#if templateResource.links.icon}}
        <img
          src={{templateResource.links.icon}}
          alt={{templateResource.name}}
          class="mr-20"
          style="max-height:150px;max-width: 100%;"
        >
      {{/if}}
    </div>
    <div class="col span-8">
      {{#if appReadmeContent}}
        {{marked-down markdown=appReadmeContent}}
      {{else if (not noAppReadme)}}
        <div class="text-center">
          <i class="icon icon-spinner icon-spin icon-3x"></i>
        </div>
      {{else if noAppReadme}}
        <h1 class="mb-10 text-capitalize">
          {{templateResource.name}}
        </h1>
        <p>{{templateResource.description}}</p>
        <div class="row">
          <button class="btn btn-sm bg-transparent pl-0" type="button" {{action "toogleDetailedDescriptions"}}>
            {{t "newCatalog.seeMore"}}
          </button>
        </div>
      {{/if}}
    </div>
  </div>
</section>

{{#accordion-list as |al expandFn|}}
  {{#unless istio}}
    {{#accordion-list-item
       title=(t "newCatalog.appInfo")
       detail=(t "newCatalog.appInfoDetail")
       expandAll=al.expandAll
       expand=(action expandFn)
       expanded=detailExpanded
    }}
      <div class="row">
        {{#if readmeContent}}
          <div class="col span-12" style="overflow-y: auto; max-height: 500px;">
            {{marked-down markdown=readmeContent}}
          </div>
        {{else}}
          <h2 class="mb-10">
            {{t (if editing titleUpgrade titleAdd) name=templateResource.name}}
          </h2>
          <p>{{templateResource.description}}</p>
        {{/if}}
      </div>
    {{/accordion-list-item}}
  {{/unless}}


  {{#accordion-list-item
     title=(t (if selectedTemplateModel.questions "inputAnswers.config" "newCatalog.helm.label"))
     detail=(t (if selectedTemplateModel.questions "inputAnswers.protip" "newCatalog.helm.protip"))
     expandAll=al.expandAll
     expandOnInit=true
     expand=(action expandFn)
  }}

    <div class="row">
      <div class="col span-6">
        {{form-name-description
          model=catalogApp
          nameRequired=false
          descriptionShow=false
          nameDisabled=(or editing isLonghorn)
          bothColClass="col span-12"
          colClass="col span-12"
        }}
      </div>
      <div class="col span-6" style="padding-top: 6px;"> {{!-- matches styles of form-name-description --}}
        <label for="" class="acc-label">
          {{t "newCatalog.templateVersion"}}
        </label>
        {{new-select
          classNames="form-control"
          content=sortedVersions
          prompt="newCatalog.version.prompt"
          localizedPrompt=true
          optionLabelPath="version"
          optionValuePath="link"
          value=editable.selectedTemplateUrl
          disabled=getTemplate.isRunning
        }}
        <p class="text-info">
          {{t (if editing selectVersionUpgrade selectVersionAdd)}}
        </p>
      </div>
    </div>

    <div class="over-hr">
      <span>
        {{t "generic.namespace"}}
      </span>
    </div>

    <div class="row">
      <div class="col span-12">
        {{#if selectedTemplateModel.requiredNamespace}}
          <label class="acc-label pb-5">
            {{t "newCatalog.requiredNamespace"}}
          </label>
          <p class="mt-0">
            {{primaryResource.displayName}}
          </p>
        {{else}}
          {{form-namespace
            namespace=primaryResource
            errors=namespaceErrors
            registerHook=(action "registerHook")
          }}
        {{/if}}
      </div>
    </div>

    <div class="over-hr">
      <span>
        {{t "newCatalog.helm.options.label"}}
      </span>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "newCatalog.helm.options.wait.label"}}
        </label>
        {{schema/input-boolean
          value=catalogApp.wait
          classNames="form-control"
        }}
        <p class="help-block">
          {{t "newCatalog.helm.options.wait.help"}}
        </p>
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "newCatalog.helm.options.timeout.label"}}
        </label>
        <div class="input-group">
          {{input-integer
            value=catalogApp.timeout
            min=1
            classNames="form-control"
          }}
          <span class="input-group-addon bg-default">
            {{t "generic.seconds"}}
          </span>
        </div>
        <p class="help-block">
          {{t "newCatalog.helm.options.timeout.help"}}
        </p>
      </div>
    </div>

    <hr/>

    {{#if getTemplate.isRunning}}
      <section class="row">
        <div class="text-center">
          <i class="icon icon-spinner icon-spin icon-3x"></i>
        </div>
      </section>
    {{else}}
      <div class="row">
        {{#if selectedTemplateModel}}
          <div class="col span-12">
            {{#if selectedTemplateModel.questions}}
              {{input-answers
                app=catalogApp
                selectedTemplate=selectedTemplateModel
                showHeader=false
                namespaceId=(if requiredNamespace requiredNamespace primaryResource.name)
              }}
            {{else}}
              {{input-custom-answers
                app=catalogApp
                selectedTemplate=selectedTemplateModel
              }}
            {{/if}}
          </div>
        {{/if}}
      </div>
    {{/if}}
  {{/accordion-list-item}}

{{/accordion-list}}

{{#if (and selectedTemplateModel (not getTemplate.isRunning))}}
  {{#if showPreview}}
    <section>
      <div class="over-hr hand no-select">
        <span {{action "togglePreview"}}>
          {{t "newCatalog.preview"}}
          <i class="icon {{if previewOpen "icon-chevron-up" "icon-chevron-down"}}"></i>
        </span>
      </div>

      {{#if previewOpen}}
        <div class="tabs">
          <div class="tab-header row">
            <div>
              <label class="acc-label">
                {{t "newCatalog.templateFiles"}}
              </label>
              {{searchable-select
                content=filenames
                value=previewTab
                readOnly=readOnly
              }}
            </div>
          </div>

          <div class="row">
            {{#if decoding}}
              <section class="row">
                <div class="text-center">
                  <i class="icon icon-spinner icon-spin icon-3x"></i>
                </div>
              </section>
            {{else}}
              {{#if (eq  previewTab "answers")}}
                {{code-block
                  code=answersString
                  language="yaml"
                }}
              {{else}}
                {{code-block
                  code=selectedFileContetnt
                  language="yaml"
                }}
              {{/if}}
            {{/if}}
          </div>
        </div>
      {{/if}}
    </section>
  {{/if}}

  {{#if upgrade}}
    <div class="checkbox pt-10">
      <label>
        {{input
          type="checkbox"
          checked=forceUpgrade
        }}
        {{t "newCatalog.forceUpgrade"}}
      </label>
    </div>
  {{/if}}
  {{#if isGKE}}
    <div class="banner bg-warning">
      <div class="banner-icon">
        <span class="icon icon-alert"></span>
      </div>
      <div class="banner-message">
        <p>{{t "ingressPage.gkeIngressWarning"}}</p>
      </div>
    </div>
  {{/if}}

  {{top-errors errors=errors}}

  <div class="footer-actions">
    {{save-cancel
      createLabel=(if editing saveUpgrade (if istio "newCatalog.istio.saveNew" saveNew))
      save=(action "save")
      cancel=(action "cancel")
    }}
  </div>
{{else}}
  <div class="footer-actions">
    <button class="btn bg-transparent" type="button" {{action "cancel"}}>
      {{t "saveCancel.cancel"}}
    </button>
  </div>
{{/if}}
